<template>
	<view class="comp-choose-size" :style="{
		marginLeft: offsetLeft + 'px',
	}">
		<scroll-view class="scroll-wrap" scroll-x="true" scroll-left="0" :enable-flex="true">
			<view :class="['scroll-view-item_H',{
				active: current === item.value,
				last: index === list.length - 1,
			}]" v-for="(item,index) in list" :key="index" @tap="onTabItem(item)">
				<view class="item-name">
					{{item.name}}
				</view>
				<text v-if="!item.custom" class="item-text">{{item.px + 'px'}}</text>
			</view>
		</scroll-view>

	</view>
	<custom-size-popup v-model:show="showSizePopup" :size="customSize" @confirm="onConfirm" />

</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		defineEmits,
		computed,
		shallowRef,
		watch,
	} from "vue";
	import customSizePopup from '@/components/custom-size-popup/custom-size-popup.vue';
	import {
		sizeList
	} from '@/common/js/data.js';
	const list = computed(item => {
		return [
			customObj,
			...props.sizeList,
		]
	})
	
	const props = defineProps({
		current: {
			type: String,
		},
		offsetLeft: {
			type: Number,
			default: 0,
		},
		sizeList: {
			type: Array,
			default: () => sizeList,
		},
	});
	
	const customObj = reactive({
		id: 12,
		specid: 12,
		dpi: 300,
		name: "自定义",
		custom: true,
		value: '',
		px: '',
		unit: 'px',
	});
	const showSizePopup = ref(false);


	const customSize = computed(() => {
		return {
			mm: customObj.value,
			px: customObj.px,
			unit: customObj.unit
		}
	})

	const emits = defineEmits(['change']);

	const onTabItem = (item) => {
		if (item.custom) {
			showSizePopup.value = true;
		} else {
			emits('change', item);
		}
	}
	const onConfirm = (data) => {
		console.log('data', data);
		customObj.value = data.size.mm.join('x');
		customObj.px = data.size.px.join('x');
		customObj.unit = data.size.unit;
		emits('change', customObj);
	}
	
	const changeCustomSize = (size) => {
		customObj.value = size.mm;
		customObj.px = size.px;
		customObj.unit = size.unit;
	};
	
	defineExpose({
		changeCustomSize
	})
</script>

<style lang="less" scoped>
	.comp-choose-size {
		position: relative;

		.scroll-wrap {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-flex;
			vertical-align: middle;
			flex-direction: column;
			gap: 5px;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: 72px;
			width: 83px;
			margin-right: 17px;
			background-color: #fff;
			border-radius: 8px;
			padding: 5px 0px;
			border: 1px solid rgba(229, 229, 229, 1);

			&.active {
				border: 2px solid rgba(69, 145, 230, 1);

				.item-text {
					color: rgba(69, 145, 230, 1);
				}
			}

			&.last {
				margin-right: 0;
			}
		}

		.item-name {
			font-size: 14px;
			line-height: 20px;
			color: rgba(56, 56, 56, 1);
		}

		.item-text {
			font-size: 12px;
			line-height: 18px;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>